<template>
	<div class="wrapper">
		<el-alert
    type="warning"
    :title="`出勤${attendanceRatio[instance].appears}/${attendanceRatio[instance].total}次`"
    :closable="false"
    description="注：以上次数不重复计算小号出勤（即双开不重复计算），但是出勤角色分布图中是计算的，所以数目会有所差异，属正常现象">
  	</el-alert>
		<div ref="container" class="container"></div>
	</div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
const classMap = {
  战士: "#c2b396",
  盗贼: "#e4ff95",
  法师: "#4ee0ff",
  牧师: "#fbfbff",
  萨满祭司: "#f793d9",
  术士: "#6b75ee",
  德鲁伊: "#f99645",
  猎人: "#8ac37e"
};

export default {
	props:{
		attendanceRatio: {
			required: true,
			type: Object
		},
		attendanceDistribution: {
			required: true,
			type: Object
		},
		classes: {
			required: true,
			type: Object
		},
		instance: {
			required: true,
			type: String
		}
	},
	methods: {
		generateChartData() {
		  let chartData = [];
		  for (var i = 0; i < this.types.length; i++) {
		  	let textColor = classMap[this.types[i].class] || '#fff'
		    if (i == this.selected) {
		      for (var x = 0; x < this.types[i].subs.length; x++) {
		      	let textColor = classMap[this.types[i].subs[x].class] || '#fff'
		        chartData.push({
		          type: this.types[i].subs[x].type,
		          percent: this.types[i].subs[x].percent,
		          color: this.types[i].color,
		          html: `<span style="background:rgba(0,0,0,.7);padding:6px;border-radius:6px;color:${textColor}">${this.types[i].subs[x].type}</span>`,
		          pulled: true
		        });
		      }
		    } else {
		      chartData.push({
		        type: this.types[i].type,
		        percent: this.types[i].percent,
		        color: this.types[i].color,
	          html: `<span style="background:rgba(0,0,0,.7);padding:6px;border-radius:6px;color:${textColor}">${this.types[i].type}</span>`,
		        id: i
		      });
		    }
		  }
		  return chartData;
		}
	},
	mounted() {
		this.chart = am4core.create(this.$refs.container, am4charts.PieChart);

		this.selected = undefined;
		this.types = [];

		let attendanceDistributions = this.attendanceDistribution[this.instance];

		Object.keys(attendanceDistributions).forEach((name,i) => {
			let tp = {
				type: name,
				percent: attendanceDistributions[name],
				color: this.chart.colors.getIndex(i),
				class: this.classes[name]
			}

			if(this.instance === 'TOTAL'){
				tp.subs = []
				Object.keys(this.attendanceDistribution[name]).forEach(username => {
					tp.subs.push({
						type: username,
						percent: this.attendanceDistribution[name][username],
						class: this.classes[username]
					})
				})
			}
			this.types.push(tp)
		})

		this.chart.data = this.generateChartData();

		// Add and configure Series
		let pieSeries = this.chart.series.push(new am4charts.PieSeries());
		pieSeries.dataFields.value = "percent";
		pieSeries.dataFields.category = "type";
		pieSeries.slices.template.propertyFields.fill = "color";
		pieSeries.slices.template.propertyFields.isActive = "pulled";
		// pieSeries.labels.template.propertyFields.color = ""
		// pieSeries.labels.template.propertyFields.fill = 'textColor'
		pieSeries.labels.template.propertyFields.html = "html"
		pieSeries.labels.template.stroke = 'rgba(0,0,0,.1)'
		pieSeries.labels.template.strokeWidth = 0

		if(this.instance === 'TOTAL'){
			pieSeries.slices.template.events.on("hit", event => {
			  if (event.target.dataItem.dataContext.id != undefined) {
			    this.selected = event.target.dataItem.dataContext.id;
			  } else {
			    this.selected = undefined;
			  }
			  this.chart.data = this.generateChartData();
			});
		}
	}
}
</script>

<style lang="less" scoped>
.wrapper{
	display: flex;
	flex-direction: column;
	width: 700px;
	height: 350px;
	.container{
		flex: 1;
	}
}
</style>
